<template>
	<div class="pages">
		<div @click="prev" class="next">上一页</div>
		<view class="ul">
			<view class="li" v-for="(item,index) in pageArry" @click="change(item)" :class="{active:isActive==index}">{{item}}</view>
		</view>
		<div @click="next" class="prev">下一页</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				page:[],
				pageArry:[],
				isActive:0,
				indexPage:1
			}
		},
		props:{
			total:{
				type:Number,
				default:0
			},
			current:{
				type:Number,
				default:1
			},
			pagesize:{
				type:Number,
				default:10
			},
			paging:{
				type:Number,
				default:5
			},
			goodsId:{
				type:String,
				default:''
			},
			type:{
				type:Number,
				default:null
			}
		},
		watch:{
			total(n){
				let pages = n/this.pagesize;
				for(var i=0;i<pages;i++){
					this.page.push(i+1)
				}
				this.pageArry = (this.page).slice(0,this.paging);
			}
		},
		methods:{
			change(f){
				this.indexPage = f;
				let pages = this.page;
				let pageIndex = pages.indexOf(f);
				let newPage = pages.slice(pageIndex,pageIndex+this.paging);
				/* if(newPage.length<5){
					newPage = pages.slice(pageIndex- (this.paging-newPage.length),pageIndex+this.paging);
				} */
				this.pageArry =newPage
				for(var i=0;i<this.pageArry.length;i++){
					if(f==this.pageArry[i]){
						this.isActive=i;
						this.$parent.getList(f,this.goodsId,this.type)
						return
					}
				}
			},
			next(){
				if(this.indexPage>=(this.page).length){
					return
				}
				this.change(this.indexPage+1)
			},
			prev(){
				if(this.indexPage==1){
					return
				}
				this.change(this.indexPage-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages{
		width:90%;
		margin: 30px auto;
		display: flex;
		justify-content: space-between;
		text-align: center;
		div{
			width:16%;
			border:1px solid #ddd;
			padding:4rpx 0;
			color:#666;
			font-size:14px;
		}
		.ul{
			width:60%;
			display: flex;
			justify-content: space-between;
			.li{
				width:14%;
				border:1px solid #ddd;
				padding:4rpx 0;
				color:#666;
				font-size:14px;
				text-align: center;
				&.active{
					color:#fd8197;
					border:1px solid #fd8197;
				}
			}
		}
	}
</style>
